﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>文章列表</title>
    <link href="../css/css.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .centen
        {
            width: 1000px;
            margin: 0 auto 0 auto;
            margin-top: 70px;
        }
        .topsrea
        {
            width: 1000px;
            height: 70px;
            background-color: White;
            position: fixed;
            top: 0;
            left: 50%;
            margin-left: -500px;
            z-index: 99;
        }
        .seararticle
        {
            width: 90%;
            height: 30px;
            margin-top: 20px;
            font-size: 20px;
        }
        .serach
        {
            width: 40px;
            height: 30px;
            border: 0;
            background-color: #F37B0B;
            color: White;
        }
        .centenlist
        {
            clear: both;
            width: 97%;
            height: 30px;
            padding-top: 15px;
            position: relative;
            margin-left: 3%;
        }
        .centenimg
        {
            float: left;
            margin-right: 15px;
        }
        .centenimg img
        {
            width: 80px;
            height: 80px;
            -webkit-border-radius: 10px;
        }
        .cententxt
        {
            width: auto;
            height: 30px;
            overflow: hidden;
            border-bottom: #ccc 1px solid;
            position: relative;
            font-size: 18px;
        }
        .cententxttop
        {
            width: 83%;
        }
        .cententxt a
        {
            font-size: 14px;
        }
        .centenTime
        {
            position: absolute;
            bottom: 5px;
            width: 250px;
            color: #8E8E8E;
            right: 0;
        }
        .centenflow
        {
            float: right;
            margin-right: 4%;
        }
        
        #top
        {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            float: left;
            line-height: 50px;
            text-align: center;
            border: white 1px solid;
        }
        #bottom
        {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            float: left;
            line-height: 50px;
            text-align: center;
            border: white 1px solid;
        }
        #allselect
        {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            float: right;
            line-height: 50px;
            text-align: center;
            border: white 1px solid;
        }
        #btnsave
        {
            width: 100px;
            height: 50px;
            background-color: #ccc;
            float: right;
            line-height: 50px;
            text-align: center;
        }
        
        
        
        .chkItem
        {
            width: 15px;
            border: #ccc 1px solid;
            height: 15px;
            position: absolute;
            right: 10px;
            top: 1px;
            text-align: center;
            line-height: 15px;
        }
    </style>
    <script src="../js/ajax-data.js" type="text/javascript"></script>
    <script src="../js/base.js" type="text/javascript"></script>
    <script src="../js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="../js/dialog.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            load($("#pageid").val());
            $("#serach").click(function () {
                $("#article_list").html("");
                load(1);
            });
            $("#bottom").click(function () {
                var page = $("#pageid").val();

                page++;
                $("#pageid").val(page);
                $("#article_list").html("");
                load(page);
            });
            $("#top").click(function () {
                var page = $("#pageid").val();
                page--;
                if (page < 1) { Alert("第一页"); return; }
                $("#pageid").val(page);
                $("#article_list").html("");
                load(page);
            });
            $("#allselect").click(function () {
                if ($(".chkItem").eq(0).html() == "") {
                    $(".chkItem").html("√");

                }
                else {
                    $(".chkItem").html("");

                }
            });

            $("#noChanne").click(function () {
                $("#article_list").html("");
             
                if ($("#noChanne").html() == "") {
                    $("#noChanne").html("√");
                    $("#chanel").val("1");

                }
                else {
                    $("#noChanne").html("");
                    $("#chanel").val("0");

                }
                loadnochanne();
            });
        });

        $(function () {



            $("#btnsave").bind("click", function () {
                var hide = "";
                $(".chkItem").each(function () {

                    if ($(this).html() != "") {
                        hide += $(this).attr("id") + ",";
                    }
                });
                $("#artrid").val(hide);
                if (hide == "") return;

                window.location.href = "Channel.html?id=" + hide.substr(0, hide.length - 1) + "&title=多条标题";
            });


        });
        function load(page) {

            ajax.getAjax("/admin/Ajax/Article.ashx?GetList", "channel_id=" +    $("#chanel").val() + "&page_index=" + page + "&key_word=" + $("#seararticle").val(), function (data) {
                $(data.item.table).each(function () {
                    var html = "<div class=\"centenlist\"><div class=\"cententxt\" ><div onclick=\" window.location.href='Channel.html?id=" + this.id + "&title=" + this.title + "'\">" + this.title + "</div><div class=\"centenTime\">" + this.date + " <div class=\"chkItem\" id=\"" + this.id + "\"></div> </div></div></div>";
                    $("#article_list").append(html);
                });
                $(".chkItem").click(function () {

                    if ($(this).html() == "") {
                        $(this).html("√");
                    }
                    else {
                        $(this).html("");
                    }
                });
            });
        }

        function loadnochanne() {
            ajax.getAjax("/admin/Ajax/Article.ashx?GetList", "channel_id=" + $("#chanel").val() + "&page_index=1", function (data) {
                $(data.item.table).each(function () {
                    var html = "<div class=\"centenlist\"><div class=\"cententxt\" ><div onclick=\" window.location.href='Channel.html?id=" + this.id + "&title=" + this.title + "'\">" + this.title + "</div><div class=\"centenTime\">" + this.date + "<div class=\"chkItem\" id=\"" + this.id + "\"></div> </div></div></div>";
                    $("#article_list").append(html);
                });
                $(".chkItem").click(function () {

                    if ($(this).html() == "") {
                        $(this).html("√");
                    }
                    else {
                        $(this).html("");
                    }
                });
            });
        }
    </script>
</head>
<body>
  <input type="hidden" id="chanel" value ="1" />
    <input type="hidden" id="artrid" />
    <div id="topsrea" class="topsrea">
        <input type="text" id="seararticle" class="seararticle" />
        <input type="button" id="serach" class="serach" value="搜索" />
        <div style="text-align: right; margin-top: 10px; position: relative;">
            未分配频道
            <div id="noChanne" style="width: 20px; height: 20px; border: #ccc 1px solid; position: absolute;
                right: 86px; top: 0px; font-size: 21px; text-align: -webkit-center;">√
            </div>
        </div>
    </div>
    <div class="centen">
        <div id="article_list">
        </div>
        <div>
            <input type="hidden" id="pageid" value="1" />
            <div id="top">
                上一页</div>
            <div id="bottom">
                下一页</div>
            <div id="btnsave">
                确定</div>
            <div id="allselect">
                全选</div>
        </div>
    </div>
</body>
</html>
